import React, { useEffect, useState } from 'react'
import './Record.less'
import * as echarts from 'echarts';
import { Space, Table, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import $axios from '../../../utils/axios';

interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

const columns: ColumnsType<DataType> = [
    {
        title: '测量时间',
        dataIndex: 'createTime',
        key: 'createTime',
        align: 'center',
        width: 100,
        render: (text) => <a>{text}</a>,
    },
    {
        title: '数值(kg)',
        dataIndex: 'weight',
        key: 'weight',
        align: 'center',
    },
    {
        title: '评估',
        dataIndex: 'weight',
        key: 'weight',
        align: 'center',
    },
    {
        title: '数据来源',
        key: 'weight',
        dataIndex: 'weight',
        align: 'center',
    },
    {
        title: '操作',
        key: 'action',
        align: 'center',
        render: (_, record) => (
            <Space size="small">
                <Button type="link">编辑</Button>
                <Button type="link" style={{ color: 'red' }}>删除</Button>
            </Space>
        ),
    },
];

var myChart: any = {};
export default function Record({ id }: any) {
    // 存储居民体重数据
    let [resW, setW] = useState([])

    // 调居民体重数据
    let weight = () => {
        $axios({
            url: '/api/getWeightByResidentId',
            method: 'post',
            data: {
                residentId: id,
                limit: '7'
            }
        }).then((res) => {
            console.log(res, '3333');
            let data = res.data.reverse()

            setW(data)

            charts(data.map((i: any) => {
                return i.weight
            }), data.map((i: any) => {
                return i.createTime.substr(5, 5)
            }),'one')
        })
    }

    // 调居民血糖数据
    let mmol=()=>{
        $axios({
            url:'/api/getBloodSugarByResidentId',
            method:'post',
            data:{
                residentId:id,
                limit:'7'
            }
        }).then((res)=>{
            console.log(res);
            
        })
    }
    // 

    //    let ceshi= 
    //     console.log(ceshi);


    //  表格函数
    let charts = (data: any, time: any,dom:string) => {
        debugger
        var chartDom = document.getElementById(dom);
        myChart = echarts.init(chartDom as HTMLElement);
        var option;
        option = {
            xAxis: {
                type: 'category',
                data: time,
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'line',
                    smooth: true
                }
            ]
        };

        option && myChart.setOption(option);
    }

    const throll = (fn) => {
        let timer = null;
        return function () {
            clearTimeout(timer)
            timer = setTimeout(() => {
                console.log(123);
                fn()

            }, 2000)
        }
    }
    //加一个防抖

    window.onresize = throll(() => {
        myChart.resize();  // 这句话你想在外面
    })
    // 页面初次渲染完成
    useEffect(() => {
        weight()
        mmol()

    }, [])


    return (
        <div >
            <div className='maxs'>
                <div className='box' id='one'></div>
                <div className='box1'>
                    <h3>体重记录</h3>
                    <Table columns={columns} dataSource={resW} size='small' rowKey={(i) => i.key} />
                </div>
            </div>

            <div className='maxs'>
                <div className='box' id='one2'></div>
                <div className='box1'>
                    <h3>体重记录</h3>
                    <Table columns={columns} dataSource={resW} size='small' rowKey={(i) => i.key} />
                </div>
            </div>

            <div className='maxs'>
                <div className='box' id='one3'></div>
                <div className='box1'>
                    <h3>体重记录</h3>
                    <Table columns={columns} dataSource={resW} size='small' rowKey={(i) => i.key} />
                </div>
            </div>

            <div className='maxs'>
                <div className='box' id='one4'></div>
                <div className='box1'>
                    <h3>体重记录</h3>
                    <Table columns={columns} dataSource={resW} size='small' rowKey={(i) => i.key} />
                </div>
            </div>
        </div>

    )
}
